<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>桂图管理系统</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/element-ui2.13.1.css">
	<style>
		/*.modal-dialog modal-lg {*/
		/*	width: 70vw;*/
		/*	margin: 30px auto;*/
		/*}*/

		.container {
			width: 90vw;
		}

		/*.row {*/
		/*	text-align: center;*/
		/*}*/
	</style>
</head>

<body>
	<div id="all-box">
		<nav class="navbar navbar-default">
			<div class="container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
						data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
						<span class="sr-only">切换导航</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-tasks"></span></a>
				</div>

				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li>
							<router-link to="/articles">文章</router-link>
						</li>
						<li>
							<router-link to="/cards">卡片</router-link>
						</li>
						<li>
							<router-link to="/books">书籍</router-link>
						</li>
						<li>
							<router-link to="/users">用户</router-link>
						</li>
						<li>
							<router-link to="/circulate">借还书</router-link>
						</li>
					</ul>
				</div><!-- /.navbar-collapse -->
			</div><!-- /.container-fluid -->
		</nav>
		<main class="container well">
			<div class="jumbotron">
				<router-view></router-view>
			</div>
		</main>
	</div>
	<p></p>
	<template id="cards">
		<div>
			<div class="row">
				<div class="col-md-12 search">
					<h2>卡片管理</h2>
					<form class="form-inline" role="form">
						<div class="form-group">
							<label for="">标题：</label>
							<input type="text" class="form-control" name="title" placeholder="请输入文章标题">
							<label for="">发布时间：</label>
							<input class="form-control" id="" type="date" name="publishTime" placeholder="请选择时间">
							<button class="btn btn-primary" type="button">查询</button>
						</div>
					</form>
					<button class="btn btn-primary" style="float: right; margin: 10px 0;" data-toggle="modal"
						data-target="#addCardsModal">添加卡片</button>
				</div>
			</div>
			<el-table :data="tableData" style="width: 100%" stripe border>
				<el-table-column type="index" width="50"></el-table-column>
				<el-table-column prop="publishTime" label="发布时间" width="180"></el-table-column>
				<el-table-column prop="heading" label="头部内容" width="250" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="hasAppendix" label="是否有子条目" width="110"></el-table-column>
				<el-table-column prop="appendix" label="子条目id" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="" label="操作" width="150" fixed="right">
					<template slot-scope="{row,$index}">
						<button type="button" class="btn btn-info" data-toggle="modal" data-target="#addCardsModal">编辑</button>
						&nbsp;&nbsp;
						<button type="button" class="btn btn-danger" onclick="return delete_info({id})">删除</button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 添加编辑卡片模态框 -->
			<div id="form_data" style="margin: 20px;">
				<div class="modal fade" id="addCardsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
					aria-hidden="true">
					<div class="modal-dialog modal-lg">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
									&times;
								</button>
								<h4 class="modal-title" id="myModalLabel">
									卡片信息
								</h4>
							</div>
							<div class="modal-body">
								<form class="form-horizontal" role="form">
									<div class="form-group">
										<label for="title" class="col-sm-2 control-label">头部标题：</label>
										<div class="col-sm-9">
											<input type="text" class="form-control" name="title" value="" placeholder="请输入">
										</div>
									</div>
									<div class="form-group">
										<label for="title" class="col-sm-2 control-label">头部封面：</label>
										<div class="col-sm-9">
											<label for="headCove" type="button" class="btn btn-primary col-sm-2">选择文件</label>
											<input type="file" id="headCover" name="headCover" style="display: none" @change="" />
											<span class="badge" style="background-color: #337ab7; margin: 5px 10px">{{  }}</span>
										</div>
									</div>
									<div class="form-group">
										<label for="title" class="col-sm-2 control-label">头文章内容：</label>
										<div class="col-sm-9">
											<input type="text" class="form-control" name="contentUrl" value="" placeholder="支持填入文章id或者外部文章链接">
										</div>
									</div>
									<div class="form-group">
										<label for="lastRevisionTime" class="col-sm-2 control-label">发布时间：</label>
										<div class="col-sm-3">
											<input class="form-control" id="lastRevisionTime" type="date"
												name="lastRevisionTime">
										</div>
									</div>
									<div class="form-group">
										<label for="hasAppendix" class="col-sm-2 control-label">是否有子条目：</label>
										<el-switch v-model="hasAppendix"></el-switch>
									</div>

									<div class="form-group">
										<label for="appendix" class="col-sm-2 control-label"
											v-bind:disable="tableData.hasAppendix">子条目ID：</label>
										<div class="col-sm-9">
											<input name="appendix" class="form-control">

										</div>
									</div>
								</form>
							</div>
							<div class="modal-footer">
								<button type="submit" class="btn btn-primary">发布卡片</button><span id="tip"></span>
							</div>
						</div><!-- /.modal-content -->
					</div><!-- /.modal -->
				</div>
			</div>
		</div>
	</template>

	<template id="articles">
		<div>
			<div class="row">
				<div class="col-md-12 search">
					<h2>文章管理</h2>
					<form class="form-inline" role="form">
						<div class="form-group">
							<label for="">标题：</label>
							<input type="text" class="form-control" name="title" placeholder="请输入文章标题">
							<label for="">文章内容：</label>
							<input type="text" class="form-control" name="content" placeholder="请输入文章内容">
							<button class="btn btn-primary" type="button">查询</button>
						</div>
					</form>
					<button class="btn btn-primary" style="float: right; margin: 10px 0;" data-toggle="modal"
						data-target="#addAriticlesModal">添加文章</button>
				</div>
			</div>
			<el-table :data="tableData" style="width: 100%" stripe border>
				<el-table-column type="index" width="50" label="序号"></el-table-column>
				<el-table-column label="修改日期" width="180">
					<template slot-scope="scope">
				        <span>{{ scope.row.lastRevisionTime }}</span>
				    </template>
				</el-table-column>
				<el-table-column label="文章标题" width="180">
					<template slot-scope="scope">
				        <span>{{ scope.row.title }}</span>
				    </template>
				</el-table-column>
				<el-table-column label="内容" show-overflow-tooltip>
					<template slot-scope="scope">
				        <span>{{ scope.row.body }}</span>
				    </template>
				</el-table-column>
				<el-table-column label="操作" width="150" fixed="right">
					<template slot-scope="scope">
						<button type="button" class="btn btn-info" data-toggle="modal" data-target="#addAriticlesModal" @click="toFillArtiInfo(scope.row)">编辑</button>
						&nbsp;&nbsp;
						<button type="button" class="btn btn-danger" @click="toDelArti(scope.row)">删除</button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 添加编辑文章模态框 -->
			<div class="form-arti">
				<div class="modal fade" id="addAriticlesModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="modal-dialog modal-lg">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
									&times;
								</button>
								<h4 class="modal-title">
									文章信息
								</h4>
							</div>
							<div class="modal-body">
								<form class="form-horizontal" role="form">
									<div class="form-group">
										<label for="title" class="col-sm-2 control-label">文章标题：</label>
										<div class="col-sm-9">
											<input type="text" class="form-control" name="title" v-model="newArti.title">
										</div>
									</div>

									<div class="form-group">
										<label for="lastRevisionTime" class="col-sm-2 control-label">修改日期：</label>
										<div class="col-sm-3">
											<input class="form-control" type="date" name="lastRevisionTime" v-model="newArti.lastRevisionTime">
										</div>
									</div>
									<div class="form-group">
										<label for="content" class="col-sm-2 control-label">文章内容：</label>
										<div class="col-sm-9">
											<textarea name="content" class="form-control" rows="30" placeholder="正文内容" v-model="newArti.body"></textarea>
										</div>
									</div>
								</form>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-primary" data-dismiss="modal" @click="addOrModArti">提交</button>
							</div>
						</div><!-- /.modal-content -->
					</div><!-- /.modal -->
				</div>
			</div>
		</div>
	</template>


	<template id="books">
		<div>
			<div class="row">
				<div class="col-md-12 search">
					<h2>书籍管理</h2>
					<form class="form-inline" role="form">
						<div class="form-group">
							<label for="">书籍ID：</label>
							<input type="text" class="form-control" name="id" placeholder="请输入书籍ID">
							<label for="">书名：</label>
							<input type="text" class="form-control" name="title" placeholder="请输入书籍名称">
							<button class="btn btn-primary" type="button">查询</button>
						</div>
					</form>
					<button class="btn btn-primary" style="float: right; margin: 10px 0;" data-toggle="modal"
						data-target="#addBookModal">添加书籍</button>
				</div>
			</div>
			<el-table :data="tableData" style="width: 100%" stripe border>
				<el-table-column type="index" label="序号" width="50"></el-table-column>
				<el-table-column prop="title" label="书名" width="250" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="author" label="作者" width="180" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="publishTime" label="出版日期" width="150"></el-table-column>
				<el-table-column prop="publisher" label=" 出版社"></el-table-column>
				<el-table-column prop="introduction" label="简介" width="180" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="cover" label="封面" width="180" :show-overflow-tooltip="true">
					<template slot-scope="scope">
						<a :href="scope.row.cover" target="_blank">{{ scope.row.cover }}</a>
					</template>
				</el-table-column>
				<el-table-column prop="location" label=" 定位" width="200"></el-table-column>
				<el-table-column label="操作" width="150" fixed="right">
					<template slot-scope="scope">
						<button type="button" class="btn btn-info" data-toggle="modal"
							data-target="#addBookModal">编辑</button>
						&nbsp;&nbsp;
						<button type="button" class="btn btn-danger" @click="toDelBook(scope.row)">删除</button>
					</template>
				</el-table-column>
			</el-table>
			
			<!-- 添加编辑书籍模态框 -->
			<div class="form-horizontal" role="form">
				<div class="modal fade" id="addBookModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
					aria-hidden="true">
					<div class="modal-dialog modal-lg">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
								<h4 class="modal-title" id="">
									书籍信息
								</h4>
							</div>
							<div class="modal-body">
								<form class="form-horizontal" role="form">
									<!--<div class="form-group">-->
									<!--	<label for="title" class="col-sm-2 control-label">书籍ID：</label>-->
									<!--	<div class="col-sm-9">-->
									<!--		<input type="text" class="form-control" id="id" name="BookId" placeholder="请输入书籍ID" v-model="addBook.">-->
									<!--	</div>-->
									<!--</div>-->
									<div class="form-group">
										<label for="lastRevisionTime" class="col-sm-2 control-label">书名：</label>
										<div class="col-sm-9">
											<input class="form-control" id="" type="text" name="title" v-model="addBook.title">
										</div>
									</div>
									<div class="form-group">
										<label for="content" class="col-sm-2 control-label">作者：</label>
										<div class="col-sm-9">
											<input class="form-control" id="" type="text" name="author" v-model="addBook.author">
										</div>
									</div>
									<div class="form-group">
										<label for="content" class="col-sm-2 control-label">出版社：</label>
										<div class="col-sm-3">
											<input class="form-control" id="" type="text" name="publisher" v-model="addBook.publisher">
										</div>
									</div>
									<div class="form-group">
										<label for="content" class="col-sm-2 control-label">出版时间：</label>
										<div class="col-sm-9">
											<input class="form-control" id="" type="date" name="publishTime" v-model="addBook.publishTime">
										</div>
									</div>
									<div class="form-group">
										<label for="content" class="col-sm-2 control-label">简介：</label>
										<div class="col-sm-9">
											<textarea class="form-control" rows="5" type="text" name="introduction" v-model="addBook.introduction"></textarea>
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-2 control-label">封面：</label>
										<div class="col-sm-9">
											<label for="cover" type="button" class="btn btn-primary col-sm-2">选择文件</label>
											<input type="file" id="cover" name="cover" style="display: none" @change="getFilePath($event)" />
											<span class="badge" style="background-color: #337ab7; margin: 5px 10px">{{ addBook.filePath }}</span>
										</div>
									</div>
									<div class="form-group">
										<label for="content" class="col-sm-2 control-label">定位：</label>
										<div class="col-sm-9">
											<input class="form-control" id="" type="text" name="location" v-model="addBook.location">
										</div>
									</div>
								</form>
							</div>
							<div class="modal-footer">
								<button type="submit" class="btn btn-primary" @click="addOrModBook">提交</button>
							</div>
						</div><!-- /.modal-content -->
					</div><!-- /.modal -->
				</div>
			</div>
		</div>
	</template>
	

	<template id="users">
		<div>
			<div class="row">
				<div class="col-md-12 search">
					<h2>用户管理</h2>
					<form class="form-inline" role="form">
						<div class="form-group" style=" margin: 10px 0;">
							<label for="">WxOpenId：</label>
							<input type="text" class="form-control" name="title">
							<label for="">姓名：</label>
							<input type="text" class="form-control" name="content">
							<button class="btn btn-primary" type="button">查询</button>
						</div>
					</form>
					<!--<button class="btn btn-primary" style="float: right; margin: 10px 0;" data-toggle="modal"-->
					<!--	data-target="#addUserModal">添加用户</button>-->
				</div>
			</div>
			<el-table :data="tableData" style="width: 100%" stripe border>
				<el-table-column type="index" label="序号" width="50"></el-table-column>
				<el-table-column prop="openid" label="WxOpenId" width="180"></el-table-column>
				<el-table-column prop="name" label="姓名" width="180"></el-table-column>
				<el-table-column prop="maxBorrowCount" label="最大借阅数" width="100"></el-table-column>
				<el-table-column prop="contact" label="联系方式" width="200"></el-table-column>
				<el-table-column prop="location" label="住址" width="350" show-overflow-tooltip></el-table-column>
				<el-table-column prop="credit" label="信用"></el-table-column>

				<el-table-column prop="" label="操作" width="150" fixed="right">
					<template slot-scope="scope">
						<button type="button" class="btn btn-info" data-toggle="modal" data-target="#addUserModal" style="width: 100%" @click="toFillUserInfo(scope.row)">修改</button>
					</template>
				</el-table-column>
			</el-table>
			
			<!-- 添加编辑用户模态框 -->
			<div method="post" action="" class="form-horizontal" role="form" onsubmit="return check_form()"
				style="margin: 20px;">
				<div class="modal fade" id="addUserModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
					aria-hidden="true">
					<div class="modal-dialog modal-lg">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
								<h4 class="modal-title">用户信息</h4>
							</div>
							<div class="modal-body">
								<form class="form-horizontal" role="form">
									<div class="form-group">
										<label for="openid" class="col-sm-2 control-label">WxOpenId：</label>
										<div class="col-sm-9">
											<input type="text" class="form-control" name="openid" value="" v-model="newUser.openid" disabled>
										</div>
									</div>
		
									<div class="form-group">
										<label for="name" class="col-sm-2 control-label">姓名：</label>
										<div class="col-sm-3">
											<input name="name" class="form-control" rows="30" v-model="newUser.name">
										</div>
										<label for="credit" class="col-sm-2 control-label">信用：</label>
										<div class="col-sm-3">
											<input name="credit" class="form-control" rows="30" v-model="newUser.credit">
										</div>
									</div>
									<div class="form-group">
										<label for="maxBorrowCount" class="col-sm-2 control-label">最大借阅数：</label>
										<div class="col-sm-3">
											<input type="text" class="form-control" name="maxBorrowCount" value="" v-model="newUser.maxBorrowingCount">
										</div>
										<label for="contact" class="col-sm-2 control-label">联系方式：</label>
										<div class="col-sm-3">
											<input type="text" class="form-control" name="contact" value="" v-model="newUser.contact">
										</div>
									</div>
									<div class="form-group">
										<label for="location" class="col-sm-2 control-label">住址：</label>
										<div class="col-sm-9">
											<input type="text" class="form-control" name="location" value="" placeholder="请输入详细地址" v-model="newUser['location']">
										</div>
									</div>
		
								</form>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-primary" @click="toUpdateUser">提交</button>
							</div>
						</div><!-- /.modal-content -->
					</div><!-- /.modal -->
				</div>
			</div>
		</div>
	</template>
	

	<template id="circulate">
		<div>
			<div class="row">
				<div class="col-md-12 search">
					<h2>借还书管理</h2>
					<form class="form-inline" role="form">
						<div class="form-group">
							<label for="">书籍ID：</label>
							<input type="text" class="form-control" name="book" placeholder="请输入书籍ID：">
							<label for="">用户ID：</label>
							<input type="text" class="form-control" name="openid" placeholder="请输入：">
							<button class="btn btn-primary" type="button">查询</button>
						</div>
					</form>
					<button class="btn btn-primary" style="float: right; margin: 10px 0;" data-toggle="modal"
						data-target="#addRecordModal">添加信息</button>
				</div>
			</div>
			<el-table :data="tableData" style="width: 100%" stripe border>
				<el-table-column prop="openid" label="用户id"></el-table-column>
				<el-table-column prop="book" label="书籍ID"></el-table-column>
				<el-table-column prop="isOpen" label="是否归还"></el-table-column>
				<el-table-column prop="borrowTime" label="借阅时间"></el-table-column>
				<el-table-column prop="expectedReturnTime" label="预期归还时间" :show-overflow-tooltip="true">
				</el-table-column>
				<el-table-column prop="returnTime" label="归还时间"></el-table-column>

				<el-table-column prop="" label="操作" width="150" fixed="right">
					<template slot-scope="{row,$index}">
						<button type="button" class="btn btn-info" data-toggle="modal"
							data-target="#addRecordModal">编辑</button>
						&nbsp;&nbsp;
						<button type="button" class="btn btn-danger" onclick="return delete_info({id})">删除</button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 添加编辑借还模态框 -->
			<div method="post" action="" class="form-horizontal" role="form" onsubmit="return check_form()"
				style="margin: 20px;">
				<div class="modal fade" id="addRecordModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
					aria-hidden="true">
					<div class="modal-dialog modal-lg">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
									&times;
								</button>
								<h4 class="modal-title">
									借还书信息
								</h4>
							</div>
							<div class="modal-body">
								<form class="form-horizontal" role="form">
									<div class="form-group">
										<label for="title" class="col-sm-2 control-label">用户ID：</label>
										<div class="col-sm-9">
											<input type="text" class="form-control" name="openid" value=""
												placeholder="请输入用户ID">
										</div>
									</div>
									<div class="form-group">
										<label for="title" class="col-sm-2 control-label">书籍ID：</label>
										<div class="col-sm-9">
											<input type="text" class="form-control" name="book" value=""
												placeholder="请输入用户ID">
										</div>
									</div>

									<div class="form-group">
										<label for="borrowTime" class="col-sm-2 control-label">借阅日期：</label>
										<div class="col-sm-3">
											<input class="form-control" type="date" name="borrowTime">
										</div>
									</div>

									<div class="form-group">
										<label for="expectedReturnTime" class="col-sm-2 control-label">期望归还日期：</label>
										<div class="col-sm-3">
											<input class="form-control" type="date" name="expectedReturnTime">
										</div>
									</div>

									<div class="form-group">
										<label for="returnTime" class="col-sm-2 control-label">归还日期：</label>
										<div class="col-sm-3">
											<input class="form-control" type="date" name="returnTime">
										</div>
									</div>

									<div class="form-group">
										<label for="content" class="col-sm-2 control-label">已归还：</label>
										<div class="col-sm-9">
											<el-switch v-model="isOpen" active-color="#409eff" inactive-color="#ccc">
											</el-switch>
										</div>
									</div>
								</form>
							</div>
							<div class="modal-footer">
								<button type="submit" class="btn btn-primary">提交</button>
							</div>
						</div><!-- /.modal-content -->
					</div><!-- /.modal -->
				</div>
			</div>
		</div>
	</template>

	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<!-- <script src="./js/ctrl.js"></script> -->
	<script src="js/vue.js"></script>
	<script src="./js/vue-router.min.js"></script>
	<script src="js/element-ui2.13.1.js"></script>
	<!--<script src="js/addOrEdit.js"></script>-->
	<script src="js/index.js"></script>
</body>

</html>